<template>
<div class="pageBuild">
    <vue-particles
        :class="{ show: particlesHasInit }"
        id="pageBuildParticles"
        :options="Options"
        @particlesLoaded="particlesLoaded"
    />
    <div class="back flex items-center justify-center" @click="toIndex">BACK</div>
    <tetrisBuild :mode="targetUtil" :penMode="data.penMode" ref="TetrisBuildEl" />
    <div class="util">

        
        <div class="item flex items-center justify-center" :class="{ active: targetUtil == 'pen' }" @click="changeUtil('pen')">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
            </svg>
            <div>画笔</div>
        </div>

        <div class="item flex items-center justify-center" :class="{ active: targetUtil == 'clearLine' }" @click="changeUtil('clearLine')">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-magic" viewBox="0 0 16 16">
                <path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
            </svg>
            <div>消行</div>
        </div>

        <div class="item flex items-center justify-center" @click="handleAction('clearCanvas')">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-stars" viewBox="0 0 16 16">
                <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
            </svg>
            <div>清空</div>
        </div>

        <div class="item flex items-center justify-center" @click="handleAction('reversal')">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-repeat" viewBox="0 0 16 16">
                <path d="M11 5.466V4H5a4 4 0 0 0-3.584 5.777.5.5 0 1 1-.896.446A5 5 0 0 1 5 3h6V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192Zm3.81.086a.5.5 0 0 1 .67.225A5 5 0 0 1 11 13H5v1.466a.25.25 0 0 1-.41.192l-2.36-1.966a.25.25 0 0 1 0-.384l2.36-1.966a.25.25 0 0 1 .41.192V12h6a4 4 0 0 0 3.585-5.777.5.5 0 0 1 .225-.67Z"/>
            </svg>
            <div>反转</div>
        </div>

        <div class="item flex items-center justify-center" :class="{ active: targetUtil == 'exportListText' }" @click="changeUtil('exportListText')">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-bar-up" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z"/>
            </svg>
            <div>导出</div>

            <div class="foldBox" :class="{ show: targetUtil == 'exportListText' }">
                <div class="item flex items-center justify-center" @click="handleAction('exportListText')">导出文本</div>
                <div class="item flex items-center justify-center" @click="handleAction('exportList')">导出文件</div>
            </div>
        </div>

        <div class="item flex items-center justify-center" :class="{ active: targetUtil == 'importListText' }" @click="changeUtil('importListText')">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-bar-up" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z"/>
            </svg>
            <div>导入</div>

            <div class="foldBox" :class="{ show: targetUtil == 'importListText' }">
                <div class="item flex items-center justify-center" @click="handleAction('importListText')">导入文本</div>
                <div class="item flex items-center justify-center" @click="handleAction('importList')">导入文件</div>
            </div>
        </div>

    </div>

    <div class="minoList">
        <div class="item" :class="{ active: targetMino == i }" v-for="(i, index) in minoTypeList" :key="index" @click="changeTargetMino(i)">
            <viewBlock
                :minoType="i" 
                :size="data.size"
            />
        </div>
    </div>
</div>
</template>

<script lang="ts" setup>
import { ref, onActivated, onDeactivated, reactive } from "vue";
import { useRouter } from "vue-router";
import { particlesOptions } from "@/utils/particlesOptions";
let Options = particlesOptions() as any // 初始配置
import { 
    useWindowSize,
    watchDebounced,
} from '@vueuse/core'
import useAppStore from '@/pinia'
const app = useAppStore()

const TetrisBuildEl = ref() // 实例
const particlesHasInit = ref(false)
let container = null as any // 容器实例

const particlesLoaded = async (el) => {
    particlesHasInit.value = true
    container = el
}

const data = reactive({
    size: 0,
    penMode: 'block',
})
const minoTypeList = ref(['I', 'J', 'L', 'O', 'S', 'T', 'Z'])
const targetMino = ref('I')
const changeTargetMino = (val = 'I') => {
    if (targetMino.value == val) {
        targetMino.value = 'block'
        data.penMode = 'block'
    }
    else {
        targetMino.value = val
        data.penMode = val
    }
}

const { height: WindowHeight } = useWindowSize()
const windowResize = () => {
    initTetrisSize()
}
// 防抖监听WindowHeight变化
watchDebounced (WindowHeight, windowResize, { debounce: 200 })

const initTetrisSize = () => {
    const height = Math.floor(WindowHeight.value * 0.9)
    const size = Math.floor(height / 20)
    console.log('data.size',data.size)
    data.size = size
}

const router = useRouter()
const toIndex = () => {
    app.playSound('audio3')
    router.replace({
        path: `/`,
    })
}

onActivated(() => {
    if (container) {
        container.refresh()
        particlesHasInit.value = true
    }
    initTetrisSize()
})

onDeactivated(() => {
    if (container) {
        container.pause()
        container.stop()
    }
    particlesHasInit.value = false
})

const targetUtil = ref('pen')
const changeUtil = (val = 'pen') => {
    targetUtil.value = val
}

const handleAction = (action = '') => {
    if (TetrisBuildEl.value[action]) TetrisBuildEl.value[action]()
}


</script>

<style lang="scss" scoped>
.pageBuild {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    #pageBuildParticles {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0;
    }
    .back {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 30vmin;
        border-right: 1px solid rgba(111, 155, 222, 0.1);
        color: hsl(0, 0%, 80%);
        font-size: 5vmin;
        cursor: pointer;
        border-radius: 1.5vmin;
        letter-spacing: 0.5vmin;
        transition: all 0.3s;
        z-index: 2;
        &:hover {
        color: #fff;
        border-right: 1px solid rgba(111, 155, 222, 0.4);
        max-width: 40vmin;
        background-color: rgba(111, 155, 222, 0.3);
        box-shadow: 0px 0px 24px 0px rgba(111, 155, 222, 0.4);
        letter-spacing: 4vmin;
        }
    }
    .show {
        animation: show 1s ease-in-out forwards;
    }
    @keyframes show {
        0% {
        opacity: 0;
        }
        100% {
        opacity: 1
        }
    }

    .minoList {
        position: fixed;
        top: 0;
        right: 35vmin;
        height: 100vh;
        overflow: auto;
        padding: 4vmin 0;
        box-sizing: border-box;
        .item {
            padding: 4vmin;
            height: max-content;
            box-sizing: border-box;
            margin-bottom: 3vmin;
            box-shadow: 0px 0px 0.5vmin 0px rgba(111, 155, 222, 0.4);
            transition: all 0.3s;
            cursor: pointer;
            border-radius: 1vmin;
            background-color: rgba(111, 155, 222, 0.1);
            border: 1px solid rgba(111, 155, 222, 0.1);
            &:hover {
                background-color: rgba(111, 155, 222, 0.4);
            }
            &.active {
                border: 1px solid rgba(111, 155, 222, 0.4);
                box-shadow: 0px 0px 0.5vmin 0px rgba(111, 155, 222, 0.3);
            }
        }
    }

    .util {
        position: fixed;
        top: 5vmin;
        right: 5vmin;
        width: 24vmin;

        .item {
            padding: 2vmin 4vmin;
            font-size: 3vmin;
            border-radius: 1vmin;
            background-color: rgba(111, 155, 222, 0.1);
            box-shadow: 0px 0px 0.5vmin 0px rgba(111, 155, 222, 0.4);
            transition: all 0.3s;
            cursor: pointer;
            color: #aaa;
            margin-bottom: 4vmin;
            position: relative;
            &:hover {
                background-color: rgba(111, 155, 222, 0.4);
                box-shadow: 0px 0px 1vmin 0px rgba(111, 155, 222, 0.6);
                color: #fff;
            }

            svg {
                width: 4vmin;
                height: 4vmin;
                margin-right: 1vmin;
            }

            div {
                flex-shrink: 0;
            }

            &.active {
                background-image: linear-gradient(310deg, rgb(244, 59, 71,.8) 0%, #453a94 100%);
                color: #fff;
            }

            .foldBox {
                position: absolute;
                top: 50%;
                left: -4vmin;
                padding: 2vmin 0;
                transform: translate(-100%, -50%);
                border-radius: 1vmin;
                cursor: pointer;
                pointer-events: none;
                opacity: 0;
                &.show {
                    opacity: 1;
                    pointer-events: all;
                }
                .item {
                    padding: 2vmin 4vmin;
                    font-size: 3vmin;
                    border-radius: 1vmin;
                    background-color: rgba(111, 155, 222, 0.1);
                    box-shadow: 0px 0px 0.5vmin 0px rgba(111, 155, 222, 0.4);
                    transition: all 0.3s;
                    cursor: pointer;
                    color: #aaa;
                    margin-bottom: 4vmin;
                    &:hover {
                        background-color: rgba(111, 155, 222, 0.4);
                        box-shadow: 0px 0px 1vmin 0px rgba(111, 155, 222, 0.6);
                        color: #fff;
                    }
                }
            }
        }

    }
}
</style>